<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 600px;
            height: 300px;
            border: 1px solid darkgoldenrod;

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            line-height: 300px;
            text-align: center;
        }
    </style>
    <script>
        function init() {
            document.getElementById('span1').innerText = '0%';
            document.getElementById('progress1').value = 0;
        }

        window.onload = function() {
            init();
            let timer = null;
            document.getElementById('btnStart').onclick = function() {
                //alert(1);
                //console.log('abcai12312312312');
                if (timer != null) {
                    console.log('已经开始了，不要再点了');
                    return;
                }
                timer = setInterval(function(){
                    //console.log('china');
                    let progress = parseInt(document.getElementById('progress1').value);
                    if (progress >= 100) {
                        clearInterval(timer);
                        timer = null;
                        return;
                    }
                    progress++;
                    
                    document.getElementById('progress1').value = progress;
                    document.getElementById('span1').innerText = progress.toString() + '%';
                    //console.log(progress);
                }, 100);
            }

            document.getElementById('btnStop').onclick = function() {
                //console.log(timer);
                clearInterval(timer);
                timer = null;
            }
        }


    </script>
</head>
<body>
    <button id="btnStart">开始</button>
    <button id="btnStop">结束</button>
    <div id="box">
        <span>当前进度:</span><span id="span1">80%</span>
        <progress id="progress1" value="80" max="100" min="0"></progress>
    </div>
</body>
</html>